<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽</title>
  <style>
    .demo {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background-color: skyblue;
    }

    #wrapper {
      width: 300px;
      height: 300px;
      background-color: slateblue;
      text-align: center;
      line-height: 300px;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <!-- draggable属性设置元素是否可以拖拽 -->
  <!-- 链接和图片默认是可以拖动的，不需要draggable属性 -->
  <div class="demo" draggable="true">托我</div>
  <div id="wrapper">容器</div>
</body>

</html>
<script>
  /*
   * 在拖放的过程中会触发以下事件
   * 1、在拖动目标上触发事件（源元素），作用在被拖拽的元素上：
   *    ondragstart：用户开始拖动元素时触发
   *    ondrag：元素正在拖动时触发
   *    ondragend：用户完成元素拖动后触发
   * 2、释放目标时触发的事件，作用在目标元素上：
   *    ondragenter：进入其容器范围内触发
   *    ondragover：被拖动的对象在另一个对象容器范围内拖动
   *    ondragleave：拖动的对象离开其容器范围内时触发
   *    ondrop：释放鼠标时触发
   * 3、Event.preventDefault()方法：
   *    阻止默认事件行为，在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。
   * 4、DataTransfer对象：拖拽对象用来传递的媒介，使用一般为 Event.dataTransfer.
   *    DataTransfer对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存
   *    一项或多项数据，这些数据可以使一种或者多种数据类型。
   *    DataTransfer对象提供了一些方法用于在源元素与目标元素中共享数据
   *    方法：
   *        setData(type, data) 用于声明所发送的数据与类型
   *        getData(type) 返回指定type的数据
   *        clearData(type) 删除指定类型的数据
   *    event.datatransfer.setDragImage(p_w_picpath, x, y); 
   *    -setDragImage方法用于在拖动操作过程中，修改鼠标指针所指向的图像。
   *
  */

  let demo = document.querySelector(".demo");
  let wrapper = document.querySelector("#wrapper");

  // demo.ondragstart = function (e) {
  //   console.log("用户开始拖动元素时触发", e);
  // }

  // demo.ondrag = function (e) {
  //   console.log("正在拖动的时候触发", e);
  // }

  // demo.ondragend = function (e) {
  //   console.log("结束拖动时触发", e);
  // }

  wrapper.addEventListener("dragenter", function () {
    console.log("被拖拽对象进入容器范围内触发");
  })

  wrapper.addEventListener("dragover", function (ev) {
    ev.preventDefault();
    console.log("被拖拽对象在容器内移动时触发");
  })

  wrapper.addEventListener("dragleave", function () {
    console.log("被拖拽对象离开容器时触发");
  })

  // 必须在 ondragover 事件中阻止默认行为，才会触发 ondrop 事件
  wrapper.addEventListener("drop", function () {
    console.log("释放鼠标时触发");
  })





</script>